<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style type="text/css">
        body {
            background-position: center;
            background-size: cover;
            position: relative;
            font-size: 14px;
        }

        header {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 99;
            background: #fff;
        }

        .aui-list-view .aui-img-object {
            max-width: 80px;
            height: 80px;
            line-height: 80px;
        }

        .aui-counter-list .aui-radio {
            margin-top: 30px;
        }

        .company-name {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #fff;
        }

        .company-name .aui-radio {
            margin-top: 6px;
        }

        .aui-radio:checked:after, .aui-radio.aui-checked:after {
            top: 0;
            line-height: 26px;
            height: 26px;
        }

        .aui-radio:checked:before, .aui-radio.aui-checked:before {
            content: "";
        }

        .aui-radio {
            margin: 0 10px;
        }

        .good-info {

            line-height: 1;
        }

        .good-name {
            font-size: 12px;
            line-height: 16px;
        }

        .good-info .aui-list-view-cell:after {
            left: 15px;
        }

        .good-info-list {
            color: #a3a3a3;
            font-size: 12px;
            line-height: 1.4;

        }

        .good-pirce {
            color: #ff0005;
            font-weight: bold;
        }

        .good-info-lists {
            width: 100%;
            padding: 5px 0;
            line-height: 30px;
            font-size: 12px;
        }

        .good-edit .aui-counter {
            position: absolute;
            right: 8px;
            top: 8px;
        }

        .company-name label.name {
            position: relative;
        }

        .company-name label.name:before {
            position: absolute;
            content: "\e6a3";
            right: -15px;
            font-family: "auiicon" !important;
        }

        footer {
            position: fixed;
            bottom: 0px;
            background: #fff;
            width: 100%;
        }

        footer .aui-list-view-cell {
            padding: 0 10px;
            text-align: right;
        }

        footer .aui-img-body {
            font-size: 13px;
        }

        footer .aui-list-view-cell:last-child:after {
            border: none;
        }

        footer .aui-list-view:after {
            border: none;
        }

        .shuoming {
            display: inline-block;
            color: #000;
        }

        footer .aui-btn-info {
            background: #327afa;
            border-color: #327afa;
            border-radius: 0px;
        }

        footer .all-checked {
            height: 55px;
            line-height: 55px;
        }

        footer .all-checked #allChecked {
            margin-top: 13px;
        }

        footer .aui-list-view {
            padding: 8px 0;
            margin-bottom: 0px;
        }

        .good-edit .aui-pull-left {
            margin-top: 4px;
        }

        .all-money {
            color: #ff0005;
        }

        .all-goods {
            overflow: hidden;
            float: left;
        }

        .good {
            margin-bottom: 58px;
        }

        footer.aui-border-t {
            position: fixed;
        }

        .editing {
            display: none;
        }

        .isShoucang {
            width: 90%;
            float: right;
            background: #ffeeee !important;
            border-color: #d7e5ff !important;
            color: #ff3333;
            box-sizing: border-box;
        }

        .sharePicker {
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(160px);
            height: 160px;
            overflow-y: auto;
            -webkit-transition: .5s;
            transition: .5s;
            z-index: 9999;
            text-align: center;
            width: 100%;
        }

        .sharePicker .aui-list-view {
            margin: 0;
        }

        .proColor .close {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #9c9c9c;
            position: absolute;
            right: 5px;
            top: 5px;
            color: #9c9c9c;
            z-index: 100000;
            line-height: 20px;
            text-align: center;
            -webkit-box-sizing: content-box;
        }

        .isJiesuan {
            height: 58px;
            line-height: 58px;
            width: 50%;
            float: left;
        }

        .aui-radio.aui-radio-info:checked, .aui-radio.aui-radio-info.aui-checked {
            background-color: #ff3333;
            border: solid 1px #ff3333;
        }

        .share {
            background: #f5cb49;
        }

        .weixin {
            display: inline-block;
        }

        .weixin img {
            width: 80px;
        }
        .aui-bar-tab {
            width: 100%;
            background-color: #fff;
            display: box;
            display: -webkit-box;
            box-sizing: border-box;
            font-size: 12px;
            height: 55px;
        }
        .aui-bar-tab li {
            position: relative;
            text-align: center;
            color: #666;
            width: 100%;
            box-flex: 1;
            -webkit-box-flex: 1;
            box-sizing: border-box;
        }
        .aui-bar-tab li p{
            margin: 0;
            font-size: 12px;
        }
        .aui-bar-tab li span{
            display: block;
            padding-top: 5px;
        }
        .aui-bar-tab {
            border-top: 1px solid #eee;
        }
        .pickAnimate {
             -webkit-transform: translateY(00px);
        }
        header .aui-title{
            font-size: 14px !important;
        }
    </style>
</head>
<body>

<header class="aui-bar aui-bar-nav aui-border-b">
    <div class="aui-title">
        购物车(14)
    </div>
    <div class="aui-pull-right aui-iconfont send" tapmode onclick="edit()">编辑</div>
</header>
<div class="all-goods ">
    <div class="good">
        <div class="good-info">
            <div class="company-name">
                <input class="aui-pull-left aui-radio aui-radio-info allCompany" id="p" type="checkbox">
                <label class="name " for="p">潮纺花料印刷有限公司</label>
            </div>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>


                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>

                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <div class="good-info">
            <div class="company-name">
                <input class="aui-pull-left aui-radio aui-radio-info allCompany" id="p" type="checkbox">
                <label class="name" for="p">潮纺花料印刷有限公司</label>
            </div>
            <ul class="aui-list-view">

                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>

                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>

                <li class="aui-list-view-cell aui-img aui-counter-list proList">
                    <input class="aui-pull-left aui-radio aui-radio-info" type="checkbox">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>

                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色</div>
                            <div class=" aui-pull-left">￥<span class="good-pirce">5.5</span></div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</div>
<footer class="aui-border-t">
    <div class="aui-col-xs-3 all-checked">
        <input class="aui-pull-left aui-radio aui-radio-info" id="allChecked" type="checkbox">全选
    </div>
    </div>
    <div class="aui-col-xs-6">
        <ul class="aui-list-view edited">
            <li class="aui-list-view-cell aui-img isNum ">
                <div class="aui-img-body">
                    合计：￥<span class="all-money">623500.80</span>
                    <span class="shuoming">
								160种480件不含运费
			                </span>
                </div>
            </li>
        </ul>
        <div class="  myBtn isShoucang editing">移至收藏夹</div>
    </div>
    <div class="aui-col-xs-3">
        <!-- <div class="myBtn isJiesuan edited" tapmode onclick="openToTwo('orderComfirm')">结算</div> -->
        <div class="myBtn isJiesuan share edited" tapmode onclick="share()">分享</div>
        <div class="myBtn isJiesuan edited" tapmode onclick="settlement()">结算</div>
        <div class="myBtn isDele editing">删除</div>
    </div>
    <ul class="aui-bar-tab">
        <li  id="tabbar1" tapmode onclick="randomSwitchBtn(this,'首页',0)">
            <span class="aui-iconfont aui-icon-home"></span>
            <p>
                首页
            </p>
        </li>
        <li id="tabbar2" tapmode onclick="randomSwitchBtn(this,'分类',1)">
            <span class="aui-iconfont aui-icon-cascades"></span>
            <p>
                分类
            </p>
        </li>
        <li  class="active" id="tabbar3" tapmode onclick="randomSwitchBtn(this,'购物车',2)">
            <span class="aui-iconfont aui-icon-cart"></span>
            <p class="active">
                购物车
            </p>
        </li>
        <li id="tabbar4" tapmode onclick="randomSwitchBtn(this,'进货单',3)">
            <span class="aui-iconfont aui-icon-people"></span>
            <p>
                我的
            </p>
        </li>
    </ul>
</footer>
<!-- 弹出分享 -->
<div class="sharePicker">
    <ul class="aui-list-view setOffer">
        <li class="aui-list-view-cell">
            <div class="weixin" tapmode onclick="shareWeChat()">
                <img src="../image/weixin.png">
                <p>分享到微信</p>
            </div>
            <div class="weixin" tapmode onclick="shareQQ()">
                <img src="../image/QQ.png">
                <p>分享到QQ</p>
            </div>
        </li>
        <li class="aui-list-view-cell " tapmode onclick="hidePicker()">
            取消
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/index.js"></script>
<script type="text/javascript" src="../script/iscroll2.js"></script>
<script type="text/javascript">
    apiready = function () {
        //showLoading();

    }
    $(function(){

        var scrollH;
        setTimeout(function () {
            scrollH=$("body").height()-$("header").height()-$("footer").height();
            $(".all-goods").height(scrollH);
            myScroll=new IScroll(".all-goods ",{
                mouseWheel:true,
                probeType:3,
                click:true
            })
        },200)

    })
    // mui遮罩
    var mask = mui.createMask(hidePicker);


    function randomSwitchBtn(obj,name,index) {
        api.execScript({
            name: 'root',
            script: 'randomSwitchBtnBakHome('+index + ')'
        });
    }
    //编辑状态的数量框变化
    $(document).on("change", ".goodNum", function () {
        var goodNum = $(this).val();
        $(this).parents("li").find(".good-count").eq(0).text(goodNum);
    })
    //结算下面的全选，所有的都是全选
    $(document).on("click", "#allChecked", function () {
        $(".all-goods").find("input:checkbox").prop("checked", $(this).prop("checked"));
        jisuanTotal();
    })
    //单击选选择框
    $(document).on("click", ".all-goods input:checkbox", function () {
        //单击的是公司名的选择框
        if ($(this).hasClass("allCompany")) {
            var $companyGoods = $(this).parents(".good-info");
            $companyGoods.find("input:checkbox").prop("checked", $(this).prop("checked"));
        } else {
            // 单击的是商品的选择框
            //判断处理这个公司是否全选了
            checkCompanyAll(this);
        }
        //处理判断是否是全选了
        checkAll();
        jisuanTotal();
    })
    //计算金额
    function jisuanTotal(){
        var totalMoney=0;
        $(".good ").find(".proList").each(function(){
            if($(this).find("input:checkbox").prop("checked")){
                totalMoney+=parseFloat($(this).find(".good-pirce").text());
            }
        })
        $(".all-money").text(totalMoney);
    }
    //选择框改变是判断是否是全部有选择，改变全选的状态，处理的是结算的全算
    function checkAll() {
        var num = 0, len = $(".all-goods").find("input:checkbox").length;
        $(".all-goods").find("input:checkbox").each(function () {
            if ($(this).prop("checked")) {
                num++;
            } else {
                return false;
            }
        })
        if (num == len) {
            //表示全选所有商品
            $("#allChecked").prop("checked", true);
            return true;
        } else {
            $("#allChecked").prop("checked", false);
            return false;
        }
    }
    //判断公司是否全选
    function checkCompanyAll(thisObj) {
        var num = 0,
            len = $(thisObj).parents("ul").find("input:checkbox").length;
        $(thisObj).parents("ul").find("input:checkbox").each(function () {
            if ($(this).prop("checked")) {
                num++;
            } else {
                return false;
            }
        })
        if (num == len) {
            //表示全选一个公司所有商品
            $(thisObj).parents(".good-info").find(".allCompany").prop("checked", true);
        } else {
            $(thisObj).parents(".good-info").find(".allCompany").prop("checked", false);
        }
    }
    //弹出分享
    function share() {
        mask.show();
        setBodyLayer();
        $(".sharePicker").addClass("pickAnimate");
    }
    // 关闭遮罩
    function hidePicker() {
//        $(".myPicker").removeClass("pickAnimate");
        $(".sharePicker").removeClass("pickAnimate");
        mask.myclose();
        removeBodyLayer();
    }
    //单击结算按钮
    function settlement() {
        if (confirm("还没绑定收货地址，现在去绑定？")) {
            openToTwo("my/addressList_win");
        } else {
            openToTwo("orderComfirm");
        }
    }

    // 执行购物车的edit方法,暂时无用
    function edit(obj){
        var type="";
        if($(obj).text()=="编辑"){
            $(obj).text("完成");
            type="editing";
        }else{
            $(obj).text("编辑");
        }
        api.execScript({
            frameName:'footer_tab_2',
            script:'edit("'+type+'")'
        })
    }
    //QQ分享
    function shareQQ() {
        var qq = api.require('QQPlus');
        qq.installed(function (retInstall, errInstall) {
            if (retInstall.status) {//已安装，就登陆
                qq.login(function (retLogin, errLogin) {
                    if (retLogin.status) {//登录成功
                        qq.shareNews({
                            url: 'http://sports.sina.com.cn/',
                            title: '新闻分享测试',
                            description: '新闻描述测试',
                            imgUrl: 'http://k.sinaimg.cn/n/sports/transform/20161125/bn4r-fxyawmm3366300.jpg/w570b3a.jpg'
                        }, function (retShare, errShare) {
                            if (retShare.status) {
                                alert("分享成功！");
                            } else {
                                if (errShare.msg == "cancel") {
                                    api.toast({
                                        msg: "已取消分享"
                                    })
                                }
                            }
                        });
                    } else {//登录失败
                        api.toast({
                            msg: "QQ登录失败"
                        })
                    }
                })
            } else {
                api.toast({
                    msg: "您还没没有安装QQ"
                })
            }
            hidePicker();
        });
    }
    //微信分享
    function shareWeChat() {
        var wx = api.require('wx');
        wx.isInstalled(function (retInstall, errInstall) {
            if (retInstall.installed) {//已安装，就登陆
                wx.shareWebpage({
                    apiKey: '',
                    scene: 'timeline',
                    title: '测试标题',
                    description: '分享内容的描述',
                    thumb: 'widget://a.jpg',
                    contentUrl: 'http://sports.sina.com.cn/'
                }, function (ret, errShare) {
                    if (ret.status) {
                        api.toast({
                            msg: "分享成功"
                        })
                    } else {
                        var message;
                        switch (errShare.code) {
                            case -1:
                                message = "未知错误";
                                break;
                            case 1:
                                message = "未知错误";
                                break;
                            case 2:
                                message = "您已取消分享";
                                break;
                            case 3:
                                message = "分享失败，请稍后重试";
                                break;
                            case 4:
                                message = "暂时还未授权，请联系管理员";
                                break;
                            case 5:
                                message = "服务暂不支持";
                                break;
                        }
                        api.toast({
                            msg: message
                        })
                    }
                });
            } else {
                api.toast({
                    msg: "您还没没有安装微信"
                })
            }

        });

        hidePicker();
    }
</script>
</html>